<template>
    <div class="fab-container" :class="`fab-${position}`">
      <!-- 主按钮 -->
      <van-floating-button
        icon="plus"
        @click="toggleButtons"
        class="main-button"
      />
  
      <!-- 子按钮组 -->
      <transition-group name="fab-item">
        <van-button
          v-for="(btn, index) in buttons"
          v-show="showSubButtons"
          :key="btn.name"
          :icon="btn.icon"
          :type="btn.type"
          round
          class="sub-button"
          :style="getButtonStyle(index)"
          @click="handleClick(btn.name)"
        />
      </transition-group>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { showToast } from 'vant'
  
  // 接收父组件传参
  const props = defineProps({
    position: { type: String, default: 'right' }
  })
  
  // 子按钮列表
  const buttons = ref([
    { name: '一键三连', icon: 'github', type: 'primary' },
    { name: '我要收藏', icon: 'star', type: 'success' },
    { name: '我要投币', icon: 'gold-coin', type: 'danger' },
    { name: '我要点赞', icon: 'good-job', type: 'warning' }
  ])
  
  // 控制子按钮显示
  const showSubButtons = ref(false)
  const toggleButtons = () => {
    showSubButtons.value = !showSubButtons.value
  }
  
  // 子按钮点击
  const handleClick = (name) => {
    showToast(name)
    showSubButtons.value = false
  }
  
  // 计算子按钮偏移位置样式
  const getButtonStyle = (index) => {
    const offsetY = (index + 1) * 60
    return {
      position: 'absolute',
      right: props.position === 'right' ? '0' : 'auto',
      left: props.position === 'left' ? '0' : 'auto',
      bottom: `${offsetY}px`,
      zIndex: 10
    }
  }
  </script>
  
  <style scoped>
  .fab-container {
    position: fixed;
    right: 16px;
    bottom: 100px;
    z-index: 100;
  }
  
  .fab-left {
    right: auto;
    left: 16px;
  }
  
  .main-button {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
  
  .sub-button {
    margin-top: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  .fab-item-enter-active,
  .fab-item-leave-active {
    transition: all 0.3s;
  }
  .fab-item-enter-from,
  .fab-item-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }
  </style>
  